// main.js
import React, { useState, useEffect } from 'react';
import { Button } from 'antd';
import { createFromIconfontCN } from '@ant-design/icons';
import { useHistory } from 'react-router-dom';
import { fetchsync_util } from './shipSRM/util/util';

import mainpage_mainpage from '../img/shipSRM/mobile_mainpage.png'

const IconFont = createFromIconfontCN({
  scriptUrl: 'http://111.77.154.58:2233/icon.js',
});

const storage = window.localStorage;

const Normalitemonedjzt = (props) => {
  return (
    <div onClick={() => { props.cusclick(props.url) }} style={{
      width: "28%", marginLeft: "3.5%", marginTop: "1%", height: "6vw", lineHeight: "6vw",
      color: props.color, fontSize: props.titled.length > 4 ? "0.7rem" : "0.8rem", overflow: "hidden",  fontWeight: "400", textAlign: "left"
    }}>
      <span style={{ fontSize: "1rem" }}>
        {props.icon ? <IconFont style={{ color: props.iconcolor }} type={props.icon} /> : ""}
      </span> {props.titled}
    </div>
  );
}

const MobileMainPage = () => {
  const [yhqxlist, setyhqxlist] = useState({});
  const [cdList,setCdList] = useState([])

  const history = useHistory();

  const tonormal = (route) => { history.push(route); }

  const handlereload = () => {
    window.location.reload();
  }

  const querymyyhqx = async () => {
    let redata = await fetchsync_util("/admin/sys/queryMobileMenuList", 'POST', {}, "json")
    var qxobj = {};
    for (let i = 0; i < redata.resultdata.length; i++) {
      var keystr = redata.resultdata[i].cdbh;
      qxobj[keystr] = "block"
    }
    let cdList = redata.resultdata.filter(item => item.jjcd == "1").map(item => {
      return {
        cdmc: item.cdmc,
        item: redata.resultdata.filter(item2 => item.cdmc == item2.parent_mc)
      }
    })
    setCdList(cdList)

    setyhqxlist(qxobj)

  }

  useEffect(() => {
    querymyyhqx()
  }, []);
  
  return (
    <div style={{
      height: "100vh", width: "100%", position: 'relative', textAlign: "center", fontSize: "0.75rem", fontFamily: "Microsoft YaHei",
      backgroundImage: `url(${mainpage_mainpage})`,backgroundSize: "100% 100%",
      backgroundRepeat: "no-repeat", backgroundColor: "#f3f4f8", overflow: "hidden"
    }}>
      <div style={{
        backgroundColor: "", textAlign: "center", color: "white", fontSize: "0.8rem", lineHeight: "6vh",
        position: "relative", width: "100%", height: "6vh", top: "0", fontWeight: "800"
      }}>
        主菜单
        <Button type="primary" style={{
          borderColor: "transparent", backgroundColor: "rgba(0,0,0,0.1)", color: "white",
          width: "12%", height: "1.4rem", position: "absolute", right: "1%", top: "15%", fontSize: "0.6rem", padding: "0", borderRadius: "0.1rem"
        }}
          onClick={() => {
            storage.islogin = 'loginout';
            tonormal("/mobile_login");
          }}>
          登出
        </Button>
        <Button type="primary" style={{
          borderColor: "transparent", backgroundColor: "rgba(0,0,0,0.1)", color: "white",
          width: "12%", height: "1.4rem", position: "absolute", right: "14%", top: "15%", fontSize: "0.6rem", padding: "0", borderRadius: "0.1rem "
        }}
          onClick={() => tonormal("/shipSRM_mobile/mobile_mainpage")}>
          首页
        </Button>
        <Button type="primary" style={{
          borderColor: "transparent", backgroundColor: "rgba(0,0,0,0.1)", color: "white",
          width: "12%", height: "1.4rem", position: "absolute", right: "28%", top: "15%", fontSize: "0.6rem", padding: "0", borderRadius: "0.1rem "
        }}
          onClick={handlereload}>
          刷新
        </Button>
      </div>

     

      {/* 原料 */}
      {
        cdList.map(item => {
          return (
            <div style={{
              position: "relative", margin: "3%", width: "94%", height: `${Math.ceil(item.item.length / 3) * 12}%`, backgroundColor: "rgba(1,1,1,0.3)", display: "flex",
              justifyContent: "flex-start", alignItems: "flex-start", flexWrap: "wrap", borderRadius: "5px", marginTop: "4%",
              color:"white", backdropFilter: "blur(8px)"
            }}>
              <div style={{
                width: "90%", borderLeftStyle: "solid", borderWidth: "0.3rem", borderColor: "#1890ff", height: "1rem",
                marginLeft: "5%", marginTop: "5%", textAlign: "left", fontWeight: "800", fontSize: "0.8rem", lineHeight: "1rem",

              }}>&nbsp;{item.cdmc}</div>
              {
                item.item.map(item2 => {
                  return (
                    <Normalitemonedjzt cusclick={tonormal} color="white" iconcolor={item2.tbys} icon={item2.cdtb} url={item2.cdly} titled={item2.cdmc}  />
                  )
                })
              }
            </div>
          )
        })
      }
    </div>
  );
}

export default MobileMainPage;



